<template>
    <el-dialog
            title="未打开用户列表"
            :visible.sync="visible"
            custom-class="push-dialog"
            :before-close="close"
            width="800px"
    >
        <el-table
                v-loading="loading"
                :data="list"
                stripe
                height="500px"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="headUrl"
                    align="center"
                    label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.headUrl" style="width: 50px; height: 50px"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    align="center"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    prop="cid"
                    align="center"
                    label="设备标识">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    align="center"
                    label="手机号">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </el-dialog>
</template>

<script>
	export default {
		name: 'push-dig',
        data() {
			return {
				loading: false,
				visible: false,
                params: {
					size: 10,
					page: 1
                },
                list: [],
                total: 0
            }
        },
        methods: {
			open(id) {
				this.visible = true;
				this.params.id = id;

                this.refresh()
            },
            close() {
				this.visible = false;
				this.loading = false;
				this.params.page = 1;
            },
            refresh() {
				this.loading = true;
				this.$service.msgList.msgList.info(this.params).then(res => {
					if (res) {
						this.list = res.list;
						this.total = res.pagination.total;
                    } else {
						this.list = [];
						this.total = 0;
					}
					this.loading = false;
                })
            },
			handleCurrentChange(val) {
				this.params.page = val;
				this.refresh()
			}
        }
	};
</script>

<style lang="scss" scoped>

    .pagination {
        text-align: right;
    }
</style>